<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">车辆保养</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="保养编号" prop="code">
            <el-input
              v-model="formData.code"
              placeholder="保存后自动生成"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保养主题" prop="title">
            <el-input
              v-model="formData.title"
              placeholder="请输入保养主题"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="选择车辆" prop="carId">
            <el-select
              filterable
              v-model="formData.carId"
              placeholder="请选择选择车辆"
              clearable
              @change="changeCar"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in carSelectList"
                :key="index"
                :label="item.licenseNum"
                :value="item.carId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆类型" prop="driverTypeName">
            <el-input
              v-model="formData.driverTypeName"
              placeholder="请输入车辆类型"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌" prop="brand">
            <el-input
              v-model="formData.brand"
              placeholder="请输入品牌"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶员" prop="driverId">
            <el-input
              filterable
              v-model="formData.nickName"
              placeholder="请输入驾驶员"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保养日期" prop="careDate">
            <el-date-picker
              v-model="formData.careDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择保养日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下次保养日期" prop="nextCareDate">
            <el-date-picker
              v-model="formData.nextCareDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择下次保养日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="经办人" prop="operUserId">
            <UserDialog
              @change="changeUser"
              v-model="formData.operUserId"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门名称" prop="deptName">
            <el-input
              v-model="formData.deptName"
              placeholder="请输入部门名称"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保养费用" prop="fee">
            <el-input-number
              v-model="formData.fee"
              placeholder="保养费用"
              :step="1"
              :style="{ width: '100%' }"
              controls-position="right"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="金额大写" prop="chineseFee">
            <el-input
              v-model="formData.chineseFee"
              placeholder="请输入金额大写"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保养地点" prop="address">
            <el-input
              v-model="formData.address"
              placeholder="请输入保养地点"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="配修厂" prop="repairShop">
            <el-input
              v-model="formData.repairShop"
              placeholder="请输入配修厂"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="保养内容" prop="content">
        <el-input
          v-model="formData.content"
          type="textarea"
          placeholder="请输入保养内容"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <h4 class="form-header h4">附件信息</h4>
      <el-form-item label="" prop="image">
        <FileUpload
          :isDelete="!$route.query.isInfo"
          v-model="formData.image"
        ></FileUpload>
      </el-form-item>

      <el-col :span="24">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!$route.query.isInfo"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  carCcareAdd,
  updategcarCcare,
  carCcareInfo,
} from "@/api/car/carCare.js";
import { selectList as carSelect } from "@/api/car/car.js";
import { convertCurrency } from "@/utils/ruoyi.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      carSelectList: [],
      formData: {
        code: undefined,
        title: undefined,
        carId: undefined,
        driverTypeName: undefined,
        brand: undefined,
        driverId: undefined,
        careDate: null,
        nextCareDate: null,
        operUserId: undefined,
        deptName: undefined,
        fee: undefined,
        chineseFee: undefined,
        image: undefined,
        content: undefined,
        address: undefined,
        repairShop: undefined,
      },
      rules: {
        code: [],
        repairShop: [
          {
            required: true,
            message: "请输入配修厂",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入保养地点",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入保养内容",
            trigger: "change",
          },
        ],

        title: [
          {
            required: true,
            message: "请输入保养主题",
            trigger: "blur",
          },
        ],
        carId: [
          {
            required: true,
            message: "请选择选择车辆",
            trigger: "change",
          },
        ],
        driverTypeName: [
          {
            required: true,
            message: "请输入车辆类型",
            trigger: "blur",
          },
        ],
        brand: [
          {
            required: true,
            message: "请输入品牌",
            trigger: "blur",
          },
        ],
        driverId: [
          {
            required: true,
            message: "请选择驾驶员",
            trigger: "change",
          },
        ],
        careDate: [
          {
            required: true,
            message: "请选择保养日期",
            trigger: "change",
          },
        ],
        nextCareDate: [
          {
            required: true,
            message: "请选择下次保养日期",
            trigger: "change",
          },
        ],
        operUserId: [
          {
            required: true,
            message: "请选择经办人",
            trigger: "change",
          },
        ],
        deptName: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
          },
        ],
        fee: [
          {
            required: true,
            message: "保养费用",
            trigger: "blur",
          },
        ],
        chineseFee: [
          {
            required: true,
            message: "请输入金额大写",
            trigger: "blur",
          },
        ],
        image: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {
    "formData.fee": {
      deep: true,
      handler: function (newVal, oldVal) {
        this.formData.chineseFee = convertCurrency(newVal);
      },
    },
  },
  created() {
    this.carSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    changeCar(i) {
      let row = this.carSelectList.find((e) => e.carId == i);
      console.log(row);
      if (row) {
        this.formData.brand = row.brand;
        this.formData.driverTypeValue = row.driverTypeValue;
        this.formData.driverTypeName = row.driverTypeName;
        this.formData.driverId = row.driverId;
        this.formData.nickName = row.nickName;
        this.formData.image = row.image;
        this.formData.phone = row.phone;

        this.formData.licenseNum = row.licenseNum;
      } else {
        this.formData.brand = undefined;
        this.formData.driverTypeValue = undefined;
        this.formData.driverTypeName = undefined;
        this.formData.driverId = undefined;
        this.formData.nickName = undefined;
        this.formData.image = undefined;

        this.formData.licenseNum = undefined;
      }
    },
    carSelect() {
      carSelect().then((response) => {
        this.carSelectList = response.data;
      });
    },
    changeUser(e) {
      console.log(e);
      this.formData.operUserName = e.nickName;
      this.formData.deptName = e.dept?.deptName;
      this.formData.deptId = e.dept?.deptId;
    },
    getinfo() {
      carCcareInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
    },

    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (this.formData.carCareId != undefined) {
            updategcarCcare(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            carCcareAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./maintain" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
